<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // https://juejin.cn/post/7028731182216904740#heading-8
        const imageSrc = 'https://www.themealdb.com/images/ingredients/Lime.png';

        function loadImage(src, callback) {
            const image = document.createElement('img');
            image.src = src;
            image.alt = '公众号若川视野专用图？';
            image.style = 'width: 200px;height: 200px';
            image.onload = () => callback(null, image);
            image.onerror = () => callback(new Error('加载失败'));
            document.body.append(image);
        }
        function promisify(original) {
            console.log('original', original);
            function fn(...args) {
                console.log('args 1', args);
                return new Promise((resolve, reject) => {
                    args.push((err, ...values) => {
                        console.log('回调函数A');
                        console.log('values', values);
                        if (err) {
                            return reject(err);
                        }
                        resolve(values);
                    });
                    console.log('args 2', args);

                    // original.apply(this, args);
                    Reflect.apply(original, this, args);//本行执行后执行回调函数A，故args 2在 回调函数A前执行
                });
            }
            return fn;
        }

        const loadImagePromise = promisify(loadImage);
        async function load() {
            try {
                const res = await loadImagePromise(imageSrc);
                console.log(res);
            }
            catch (err) {
                console.log(err);
            }
        }
        load();

    </script>
</body>

</html>